import React from 'react'
// ===================================================================== Declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const BtnGroup = $Lazy.load(()=>import('#tp/btn-group'))
// ===================================================================== component
const Index = ({ children, data, onTabs, defaultActiveKey = 0, controls, suffix }) => {
	const onChange = React.useCallback( (rows, index) =>{
		if(defaultActiveKey !== index){
			onTabs?.(rows, index)
		}
	},[ onTabs, defaultActiveKey ])
	return (
		<div className='bcf bbor1 h36 fxmj pr10' style={{borderRadius:'5px 5px 0 0'}}>
			<div className='fx f12'>
				{
					$fn.hasArray(data) && data.map((v,i)=>(
						<div className={`plr10 tap cp rel ${+defaultActiveKey === i ? 'c0 b' : 'g9'}`} key={i} onClick={()=>onChange(v, i)}>
							{v.title}
							<i className={`abs_lb linear w ${+defaultActiveKey === i ? 'bcm' : ''}`} style={{height:2}}></i>
						</div>
					))
				}
			</div>
			{
				controls && (
					<div className='group-btn'>
						<BtnGroup controls={controls} />
					</div>
				)
			}
			{ suffix }
		</div>
	)
}

export default Index